<template>
    <div class="whole">
        <!-- {{ tableData }} -->
        <div class="title01">
            <div class="titleFont">历史报警数据</div>
            <el-row class="input_area">
                <span>
                    <div class="font1">设备:</div>
                    <el-select v-model="value_device" placeholder="请选择">
                        <el-option
                        v-for="item in options_devices"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                <span>
                    <div class="font1">传感器:</div>
                    <el-select v-model="value_sensor" placeholder="请选择">
                        <el-option
                        v-for="item in options_sensors"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                <span>
                    <div class="font1">日期:</div>
                    <el-date-picker
                    v-model="value_timeSelector"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['12:00:00']">
                    </el-date-picker>
                </span>
                <span class="input_areaButton1">
                    <el-button icon="el-icon-upload2" @click="handleExport">导出</el-button>
                </span>
                <span class="input_areaButton2">
                    <el-button @click="handleQuery">查询</el-button>
                </span>
            </el-row>
        </div>
        <div class="main">
            <div class="table_area">
                <el-table :data="tableData" style="width:100%" ref="table" :header-cell-style="{background: '#ecf8f9', color: '#606266'}">
                    <el-table-column label=" 序号" type="index" width="150">
                        <template slot-scope="{ $index }">
                            {{ ($index+1).toString().padStart(2, '0') }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="sensorName" label="触发器名称" width="200"/>
                    <el-table-column prop="transforName" label="传感器" width="250"/>
                    <el-table-column prop="conditionType" label="条件类型" width="200"/>
                    <el-table-column prop="threshold" label="触发值" width="200"/>
                    <el-table-column prop="motionType" label="动作类型" width="250"/>
                    <el-table-column prop="unit" label="单位" width="195"/>
                    <el-table-column prop="time" label="时间" width="200"/>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>

import axios from 'axios'
import excel from './libs/excel'

// ****************************************************

// 据选项查询内容 请求路径
let query_path = '/mock/dashanmao/DataAnalysis/history_dircontent.json'

// ****************************************************

export default {
    name: 'DataAnalysisHAD',

    data: function() {
        return {
            // 设备选择框
            options_devices: [{
                value: '选项1',
                label: '设备1'
                }, {
                value: '选项2',
                label: '设备2'
                }, {
                value: '选项3',
                label: '设备3'
                }, {
                value: '选项4',
                label: '设备4'
                }, {
                value: '选项5',
                label: '设备5'
                }],
            value_device: '',
            // 传感器选择框
            options_sensors: [{
                value: '选项1',
                label: '传感器1'
                }, {
                value: '选项2',
                label: '传感器2'
                }, {
                value: '选项3',
                label: '传感器3'
                }, {
                value: '选项4',
                label: '传感器4'
                }, {
                value: '选项5',
                label: '传感器5'
                }],
            value_sensor: '',
            // 时间范围选择框
            value_timeSelector: '',
            // 表格
            tableData: [],
        }
    },
    methods: {
        handleQuery: function() {
            axios.get(query_path, {
                params: {
                    deviceName: this.value_device,
                    sensorName: this.value_sensor,
                    TimeRanges: this.value_timeSelector
                }
            })
            .then((resp)=>{
                this.tableData = resp.data.data
            })
            .catch((err)=>{
                window.alert("查询失败")
                console.log(err)
            })
        },
        handleExport: function() {
            const params = {
                title: ['触发器', '传感器', '条件类型', '触发值', '动作类型', '单位', '时间'], 
                key: ['sensorName', 'transforName', 'conditionType', 'threshold', 'motionType', 'unit', 'time'],
                data: this.tableData,
                autoWidth: true,
                filename: '历史告警数据'            
            }
            excel.exportArrayToExcel(params)
        }
    }
}
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }
    
    .whole {
        /* background-color: pink; */
        background-color: rgb(241, 243, 244);
        width: 1712px;
        height: 1044px;
        padding-top: 12px;
        padding-bottom: 0;
    }

    .title01 {
        /* background-color: green; */
        background-color: white;
        width: 1688px;
        height: 125px;
        margin: 12px;
        margin-top: 0;
        padding-top: 20px;
    }

    .titleFont {
        width: 144px;
        height: 33px;
        font-size: 24px;
        font-weight: bold;
        margin-left: 20px;
    }

    .input_area {
        margin-top: 20px;
    }

    .input_area el-input el-input-suffix i {
        padding: 1000px;
    }
    
    .font1 {
        font-size: 14px;
        padding-left: 0px;
        padding-right: 8px;
        /* background-color: red; */
        margin-left: 70px;
        display: inline-block;
    }

    /* .input_kuang .el-input--suffix {
        width: 241px;
        height: 32px;
    } */
    /* :deep(.el-input__inner) {
        width: 241px;
        height: 32px;
    } */
    :deep(.el-input--suffix .el-input__inner) {
        padding-right: 30px;
        height: 32px!important;
    }

    .el-range-editor.el-input__inner {
        display: inline-flex;
        align-items: center;
        padding: 1px 10px;
        height: 32px;
    }
    .el-range-editor.el-input__inner[data-v-4aede454] {
        display: inline-flex;
        align-items: center;
        padding: 0px 10px;
        height: 32px;
        margin-top: 1px;
        width: 500px;
    }

    .input_areaButton1 {
        margin-left: 100px;
    }

    .input_areaButton1 >>> .el-button {
        color: #02A9AB;
        font-size: 14px;
        width: 73px;
        height: 32px;
        padding-left: 0.5%;
        padding-top: 0.5%;
    }

    .input_areaButton2 {
        margin-left: 10px;
    }

    .input_areaButton2 >>> .el-button {
        font-size: 14px;
        width: 60px;
        height: 32px;
        padding-left: 0.8%;
        padding-top: 0.5%;
        background: linear-gradient(136deg, #01A29D 0%, #1D75C3 100%);
        color: white;
    }

    /* main */

    .main {
        /* background-color: blue; */
        background-color: white;
        width: 1688px;
        height: 888px;
        margin: 12px;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 21px;
    }


    .table_area {
        /* background-color: green; */
        /* background-color: white; */
        border: 1px solid rgb(224, 232, 231);
        margin-left: 20px;
        margin-right: 21px;
        margin-top: 20px;
        min-height: 781px;
    }
</style>